<template>
  <div class="book">
    <img :src="book.bigImgUrl" />
    <div>
      <div class="bookInfo">
        <h3>{{ book.title }}</h3>
        <p>{{ book.slogan }}</p>
        <p>
          <span>作者：{{ book.author }}</span>
          <span>出版社：{{ book.bookConcern }}</span>
          <span>出版日期：{{ book.publishDate }}</span>
        </p>
        <p>
          <span class="factPrice">
            {{ currency(factPrice(book.price, book.discount)) }}
          </span>
          <span class="discount"> [{{ formatDiscount(book.discount) }}] </span>
          <span
            >[定价 <i class="price">{{ currency(book.price) }}</i
            >]</span
          >
        </p>
      </div>
      <div class="addCart">
        <AddSubtractButton
          :quantity="quantity"
          @updateQuantity="handleUpdate"
        />
        <button class="addCartButton" @click="addCart(book as any)">
          加入购物车
        </button>
      </div>
    </div>
    <BookTabComponent :content="book.detail" />
  </div>
</template>

<script setup lang="ts">
import AddSubtractButton from '@/components/AddSubtractButton.vue'
import BookTabComponent from '@/components/BookTabComponent.vue'
import { useCartStore } from '@/stores'
import { ref, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getBook } from '@/api/api'
interface Ibook {
  id: number
  title: string
  author: string
  price: number
  discount: number
  bookConcern: string
  imgUrl: string
  bigImgUrl: string
  publishDate: string
  brief: string
  inventory: number
  detail: string
  newness: boolean
  hot: boolean
  specialOffer: boolean
  slogan: string
  category: {
    id: number
    name: string
    root: boolean
    parentId: number
    children: null
  }
}
interface IBook {
  id: number
  imgUrl: string
  quantity: number
  title: string
  price: number
  inventory: number
  author?: string
  bigImgUrl?: string
  bookConcern?: null
  brief?: null
  discount?: number
  publishDate?: null
}
const router = useRouter()
const route = useRoute()
const store = useCartStore()
let book = ref<Ibook>({
  id: 1,
  title: ' VC++深入详解（第3版）',
  author: '孙鑫',
  price: 168,
  discount: 0.95,
  bookConcern: '电子工业出版社',
  imgUrl:
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSytjz6QU4yP9TxggeYBPj7X-8GEgJ1aB45Bg&usqp=CAU',
  bigImgUrl:
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSytjz6QU4yP9TxggeYBPj7X-8GEgJ1aB45Bg&usqp=CAU',
  publishDate: '2019-06-01',
  brief: '....',
  inventory: 1000,
  detail: '你好你好你好',
  newness: true,
  hot: true,
  specialOffer: false,
  slogan:
    '王者归来！畅销10万余册的《VC++深入详解》全新升级，基于VS2017新版本！ 内容更新！代码更新！实力更强！ ',
  category: {
    id: 6,
    name: 'C/C++',
    root: false,
    parentId: 2,
    children: null,
  },
})
const quantity = ref(0)
const currency: any = inject('currency')
const factPrice: any = inject('factPrice')

const getBookInfo = async () => {
  console.log(route.fullPath)
  let id = route.fullPath.slice(6)
  const { data } = await getBook(Number(id))
  console.log(data)
  book.value = data[0]
  console.log(book)
}
getBookInfo()
// 子组件AddSubtractButton的自定义事件updateQuantity的处理函数
const handleUpdate = (value: number) => {
  quantity.value = value
  console.log(quantity.value)
}
const addCart = (book: IBook) => {
  let bookQuantity = quantity.value
  if (bookQuantity === 0) {
    bookQuantity = 1
  }
  let newItem = { ...book, price: factPrice(book.price, book.discount) }
  console.log(newItem)
  store.addProductToCart({ ...newItem, quantity: bookQuantity })
  console.log(store)
  router.push('/cart')
}

// 格式化折扣数据
const formatDiscount = (value: number) => {
  if (value) {
    let strDigits = value.toString().substring(2)
    strDigits += '折'
    return strDigits
  } else return value
}
</script>

<style scoped>
.book {
  width: 1100px;
  margin-top: 60px;
  text-align: left;
}
.book img {
  margin-left: 50px;
  float: left;
  width: 200px;
  height: 200px;
}
.book .bookInfo {
  margin-left: 20px;
  float: left;
  width: 800px;
  background-color: #eee;
  padding-left: 20px;
  padding-top: 5px;
}

.book .addCart {
  margin-left: 300px;
  float: left;
  margin-top: 10px;
}
.book .addCartButton {
  padding: 5px 10px 6px;
  color: #fff;
  border: none;
  border-bottom: solid 1px #222;
  border-radius: 5px;
  box-shadow: 0 1px 3px #999;
  text-shadow: 0 -1px 3px #444;
  cursor: pointer;
  background-color: #e33100;
  display: block;
  margin-left: 80px;
}
.addCartButton:hover {
  text-shadow: 0 1px 1px #444;
}

.book span {
  padding-right: 15px;
}

.book .price {
  color: gray;
  text-decoration: line-through;
}
.book .discount {
  color: red;
}
.book .factPrice {
  color: red;
  font-weight: bold;
}
</style>
